<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-wrapper">
			<view class="icon">
				<u--image width="70rpx" height="70rpx" shape="circle" :src="icon" class="logo"></u--image>
			</view>
			<navigator class="search" url="/pages/search/search">
				<u-search shape="square" placeholder="请输入关键字搜索" bgColor="#363636" :showAction="false" :disabled="true"
					@click="showSearch">
				</u-search>
			</navigator>
		</view>
		<!-- 轮播图 -->
		<view class="u-demo-block">
			<u-swiper :list="bannerList" keyName="bannerImg" @change="e => current = e.current" :autoplay="true"
				height="380rpx">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in bannerList" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<!-- 分类tab -->
		<view class="tab">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(item,index) in tabList" :key="index" class="tab_item">
					<u--image shape="circle" width="80rpx" height="80rpx" :src="item.cover"></u--image>
					<text class="grid-text">{{item.name}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 精品推荐 -->
		<view class="home-goods">
			<u--text :bold="true" iconStyle="font-size:30rpx;" text="精品推荐"></u--text>
			<view class="goods-list" v-for="(item,index) in goodsList" :key="index">
				<navigator :url="'/pages/detail/detail?id='+item._id" hover-class="navigator-hover">
				<u--image :src="item.img" width="100%" height="360rpx" mode=" aspectFit"></u--image>
				<view class="u-line-2 u-font-24">{{item.name}}</view>
				</navigator>
				<view class="goods-price">
					<span class="price">￥{{item.price}}</span>
					<span class="market-price">门市价￥229</span>
					<span class="sales">已销量：690</span>
				</view>
				
			</view> 
		</view>
	</view>
</template>

<script>
	import {
		categoryList,
		goodsList
	} from '@/api/index.js';
	export default {
		data() {
			return {
				icon: '/static/logo.png',
				// 轮播图列表
				bannerList: [{
						id: '0001',
						bannerImg: require("static/03.jpg")
					},
					{
						id: '0002',
						bannerImg: require("static/04.jpg")
					}
				],
				tabList: [], // 分类列表
				goodsList: [], //商品列表
				keyword: '',
				current: ''
			}
		},
		onLoad() {
			this.categoryListFun();
			this.goodsListFun()
		},
		methods: {
			showSearch() {
				console.log("aaa")
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			//商品分类
			categoryListFun() {
				categoryList({
					pageNo: 1,
					pageSize: 10
				}).then(res => {
					console.log(res)
					this.tabList = res.list
				})
			},
			// 商品列表
			goodsListFun() {
				goodsList({
					pageNo: 1,
					pageSize: 10
				}).then(res => {
					console.log("商品列表", res)
					this.goodsList = res.list
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		font-size: 14px;
		line-height: 24px;

		.search-wrapper {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center; //垂直居中
			background-color: black;
			padding: 14rpx;
			height: 120rpx;

			.icon {
				margin-right: 10rpx;
				padding-top: 16rpx;
			}

			.search {
				height: 60rpx;
				flex-grow: 1,
			}
		}

		//轮播图小圆点
		.indicator {
			@include flex(row);
			justify-content: center;

			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;

				&--active {
					background-color: #ffffff;
				}
			}
		}

		.tab {
			padding-top: 40rpx;

			.tab_item {
				margin-top: 20rpx;
			}
		}

		.home-goods {
			padding: 10rpx 20rpx;

			.goods-price {
				padding: 10rpx;

			}

			.price {
				font-weight: 600;
				color: red;
				font-size: 36rpx;
				margin-right: 20rpx;
			}

			.market-price {
				color: #ccc;
				font-size: 20rpx;
				text-decoration: line-through;
			}

			.sales {
				color: #c1bebe;
				font-size: 20rpx;
				float: right;
			}


		}
	}
</style>
